<template>
  <div class="container">
    <el-row :gutter="20">
      <!-- 右侧卡片列表 -->
      <el-col :span="20" style="display: flex;width: 100%; align-items: center;">
        <div>一级分类： </div>
        <div style="display: flex;justify-content: flex-start;">
          <div style="padding: 10px;" v-for="item, index in treeData">
            <el-check-tag :checked="item.checked">{{ item.label }}</el-check-tag>

          </div>
        </div>
      </el-col>
      <el-col :span="20" style="display: flex;width: 100%; align-items: center;">
        <div>二级分类： </div>
        <div style="display: flex;justify-content: flex-start;">
          <div style="padding: 10px;" v-for="item, index in treeData">
            <el-check-tag :checked="item.checked">{{ item.label }}</el-check-tag>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <!-- 左侧树结构 -->
      <!-- <el-col :span="4">
        <el-tree :data="treeData" :props="treeProps" node-key="id" default-expand-all class="tree-container" />
      </el-col> -->
      <!-- 右侧卡片列表 -->
      <el-col :span="20">
        <div class="card-list">
          <div style="display: flex;flex-direction: column;" v-for="item, index in videoList" :key="index">
            <video style="width: 200px; height: 200px" :src="item.fileUrl" controls controlsList="nodownload"
              @contextmenu.prevent>
            </video>
            <div>安全生产</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import Card from "@renderer/components/card/card.vue";
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router"; // 添加这一行以导入 useRouter
const router = useRouter();
const videoList = ref([
  {
    id: 1,
    fileName: "安全生产",
    fileUrl: "https://abzy-source.oss-cn-beijing.aliyuncs.com/153/course/0/0580e8c5479456de21a13eb0cb94208e.mp4"
  },
  {
    id: 2,
    fileName: "安全生产2",
    fileUrl: "https://abzy-source.oss-cn-beijing.aliyuncs.com/153/course/0/0580e8c5479456de21a13eb0cb94208e.mp4"
  }
])
const cardList = ref([
  {
    id: 1,
    title: "无人教育",
    remark:
      "自动识别教室在场工人人脸，自动签到、根据岗位自动匹配课程、自动播放",
  },
  {
    id: 2,
    title: "专题教育",
    remark:
      "现场管理人员自行选择某个课程包,课程开始播放，同时开始识别在场工人并记学时",
  },
  {
    id: 3,
    title: "通用教育",
    remark:
      "现场管理人员自行组织教育（宣讲PPT、讲话教育等）,不依托系统内培训素材，可应用系统进行签到和学时记录",
  },
  {
    id: 3,
    title: "通用教育",
    remark:
      "现场管理人员自行组织教育（宣讲PPT、讲话教育等）,不依托系统内培训素材，可应用系统进行签到和学时记录",
  },
  {
    id: 3,
    title: "通用教育",
    remark:
      "现场管理人员自行组织教育（宣讲PPT、讲话教育等）,不依托系统内培训素材，可应用系统进行签到和学时记录",
  },
  {
    id: 3,
    title: "通用教育",
    remark:
      "现场管理人员自行组织教育（宣讲PPT、讲话教育等）,不依托系统内培训素材，可应用系统进行签到和学时记录",
  },
]);


//页面销毁时清除定时器
onUnmounted(() => {
});

onMounted(() => {
});
import { ElTree, ElRow, ElCol } from 'element-plus'

// 树结构数据
const treeData = ref([
  {
    id: 1,
    label: '安全教育视频',
    checked: true,
    children: [
      { id: 11, label: '施工安全' },
      { id: 12, label: '设备操作' },
      { id: 13, label: '应急预案' }
    ]
  },
  {
    id: 2,
    checked: false,
    label: '警示教育视频',
    children: [
      { id: 11, label: '施工安全' },
      { id: 12, label: '设备操作' },
      { id: 13, label: '应急预案' }
    ]
  },
  {
    id: 3,
    checked: false,
    label: '产品视频',
    children: [
      { id: 11, label: '施工安全' },
      { id: 12, label: '设备操作' },
      { id: 13, label: '应急预案' }
    ]
  }
])

const treeProps = {
  children: 'children',
  label: 'label'
}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
  height: 100vh;
  box-sizing: border-box;

  .tree-container {
    background: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
    height: calc(100vh - 40px);
    overflow: auto;
  }

  .card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    height: calc(100vh - 40px);
    overflow: auto;
    padding: 10px;
  }
}
</style>
